<template>
  <div class="myOrderDetails">
    <!-- 1     待支付 存放在本地缓存 （不支付 超时 删除订单） -->
    <Status1 v-if="detailsData.status==1" :detailsData="detailsData"></Status1>

    <!-- 2     已支付 存放在服务器 待取货 -->
    <Status2 v-if="detailsData.status==2" :detailsData="detailsData"></Status2>

    <!-- 2.5   已退款 （超时不取货 取消订单 退钱 状态显示） -->
    <Status2d5 v-if="detailsData.status==2.5" :detailsData="detailsData">
    </Status2d5>

    <!-- 3     已完成 待评价 -->
    <Status3 v-if="detailsData.status==3" :detailsData="detailsData" :evaluationBool="evaluationBool">
    </Status3>

    <!-- 4     已评价 已评价 -->
    <Status4 v-if="detailsData.status==4" :detailsData="detailsData">
    </Status4>

  </div>
</template>

<script>
import MyOrderDetailsContent from "@/components/My/myOrderDetails/MyOrderDetailsContent.vue";
import Status1 from "@/components/My/myOrderDetails/Status1.vue";
import Status2 from "@/components/My/myOrderDetails/Status2.vue";
import Status2d5 from "@/components/My/myOrderDetails/Status2.5.vue";
import Status3 from "@/components/My/myOrderDetails/Status3.vue";
import Status4 from "@/components/My/myOrderDetails/Status4.vue";

import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      // detailsData: {
      //   id: "001220180621" /* 带有机器编码+日期 的id */,
      //   timeStamp: 21321321312 /* 时间戳 */,
      //   totalMoney: 156 /* 总计钱数 */,
      //   status: 1 /* 状态值 */,
      //   pickUpCode: "123123" /* 取货码 */,
      //   goods: [
      //     {
      //       id: 12, //商品id
      //       pic:
      //         "http://huyaimg.msstatic.com/avatar/1093/f5/9f51df52143c14ba7fab3b01849dd4_180_135.jpg?0?424782", //商品图片
      //       inventory: "12", //商品库存
      //       name: "煎饼111", //商品名字
      //       intro: "简介：这是好吃的韭菜馅饼，选料考究，入口爽快。", //商品简介
      //       price: 10, //商品价格
      //       num: 0 //商品id
      //     },
      //     {
      //       id: 155,
      //       pic:
      //         "http://huyaimg.msstatic.com/avatar/1093/f5/9f51df52143c14ba7fab3b01849dd4_180_135.jpg?0?424782",
      //       inventory: "14",
      //       name: "煎饼222222",
      //       intro: "简介：这是好吃的韭菜馅饼，选料考究，入口爽快。",
      //       price: 20,
      //       num: 0
      //     }
      //   ],
      //   goodsTAndList: [
      //     //  {
      //     //   title: "总计",
      //     //   message: 156
      //     // },
      //     // {
      //     //   title: "平台优惠",
      //     //   message: "无"
      //     // },
      //     // {
      //     //   title: "积分",
      //     //   message: "+5"
      //     // },

      //   ],
      //   commentStarNum: 4 /*评论的星级*/,
      //   commentText: "这个真的好吃呀，啦啦啦。" /* 评论内容 */
      // },

      stars: [1, 1, 1, 1, 1],
      evaluationBool: true
    };
  },

  computed: {
    ...mapState({
      detailsData: state => {
        return state.goods.detailsData;
      }
    })
  },

  // props:['detailsData'],
  components: {
    MyOrderDetailsContent,
    Status1,
    Status2,
    Status2d5,
    Status3,
    Status4
  },

mounted() {
 console.log( this.detailsData )
},

  methods: {
    // 点击了星星
    checkStar(e) {
      let i = e.currentTarget.dataset.i;
      console.log("星星该变色了。e-->", i);
      let tempArr = [];
      for (let j = 0; j < 5; j++) {
        if (j <= i) {
          tempArr.push(1);
        } else {
          tempArr.push(0);
        }
      }
      this.setData({
        stars: tempArr
      });
    },
    // 点击了提交
    confirm() {
      // 由于本地图标 image 高于，系统图标 icon 所以两个都有的时候是显示image的
      wx: wx.showToast({
        title: "提交成功",
        icon: "success",
        image: "",
        duration: 2000,
        mask: true,
        success: function(res) {},
        fail: function(res) {},
        complete: function(res) {}
      });
      //评论成功
      this.setData({
        evaluationBool: false
      });
    },

    // 点击申请退款
    toApplyForARefund(e) {
      let orderCode = e.currentTarget.dataset.ordercode;
      console.log("orderCode--->", orderCode);
      wx.showModal({
        title: "申请退款",
        content: "订单将暂时关闭",
        showCancel: true,
        cancelText: "取消",
        cancelColor: "#ccc",
        confirmText: "确定",
        confirmColor: "",
        success: function(res) {
          //申请退款 点击确定之后，数据库删除
        },
        fail: function(res) {
          // 申请退款 点击取消
        },
        complete: function(res) {}
      });
    },
    // 去微信支付页面
    wxPay(e) {
      // let  tempData = e
      // 设置当前要支付的订单为xxx
      console.log("当前的订单是--->", detailsData);
      getApp().globalData.generateOrder = this.data.detailsData;
      wx.navigateTo({
        url: "/pages/pay/pay"
      });
    },
    // 导航
    gotoNavigator(e) {
      // 从全局变量拿到之前存储的 目标位置 坐标 开始导航

      let latitude = 41.67718;
      let longitude = 123.4631;
      wx.openLocation({
        latitude: latitude,
        longitude: longitude,
        name: "TF智餐20号",
        scale: 28
      });
    }
  }
};
</script>
<style scoped>
html {
  background: #f1f1f1;
}

/*标题  */

.title {
  margin-top: 12pt;
}

.title2 {
  font-size: 11pt;
  font-weight: bold;
  margin: 0 0 5pt 0;
}

.item {
  font-size: 10pt;
  padding: 8pt 10pt;
}

.money {
  font-weight: blod;
}

/* 4 已完成 已评论 的评价内容  */
.evaluation {
  padding: 10pt;
}
.evaluation .t {
  font-size: 14pt;
}
.evaluation .c {
  font-size: 12pt;
  font-weight: normal;
}
</style>